<template>
  <div style="display:flex;flex-direction:column;height:100%">
    <el-card>
      <div slot="header">
        <span style="color: #8497b3">园区管理</span>
      </div>

      <el-form :model="form" ref="form" class="put">
        <el-form-item prop="username" class="input" label="园区编号">
          <el-input v-model="form.id" />
        </el-form-item>

        <el-form-item prop="phone" class="input" label="园区名称">
          <el-input v-model="form.parkname" />
        </el-form-item>

        <el-form-item class="input" style="width: 30px; margin-right: 50px">
          <el-button type="info" @click="reset('form')">重置</el-button>
        </el-form-item>

        <el-form-item class="input">
          <el-button @click="yuanqu">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="margin-top: 5px;flex:1">
      <template>
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="date" label="用户姓名"> </el-table-column>
          <el-table-column prop="name" label="状态"> </el-table-column>
          <el-table-column prop="address" label="手机号码"> </el-table-column>
          <el-table-column prop="address" label="创建时间"> </el-table-column>
        </el-table>
      </template>
    </el-card>
  </div>
</template> 
<script>
export default {
  data() {
    return {
      form: {
        id: "",
        parkname: "",
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      park: [], //用户信息
    };
  },
  methods: {
    /** 用户信息 */
    yuanqu() {
      //  let url="http://localhost:3000/parkmanagement"
      //  myaxios.get(url,{id:this.id,parkname:this.parkname,}).then(res=>{
      //     console.log(res);
      //     //请求到的数据存入
      //     this.park=res.data
      //   })
    },
    reset(form) {
      this.$refs[form].resetFields();
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.put {
  display: flex;
  margin: 0 20px 0 20px;
}
.input {
  width: 300px;
  display: flex;
  margin: 0 20px;
}
.el-menu--horizontal > .el-menu-item {
  margin-right: 50px;
}
.el-form-item__label {
  min-width: 70px;
}
</style>
